<!--
 * @Date: 2024-11-21 15:35:50
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-02-17 16:05:24
 * @Description: 常用功能
-->
<template>
  <div class="hp-panel">
    <div class="hp-panel-header">{{ schema.label }}</div>
    <div class="hp-panel-body" v-hpresize="panelResize">
      <template v-if="toolsList.length === 0">
        <ElEmpty style="padding: 10px;" description="暂无内容" :image-size="60"/>
      </template>
      <template v-else>
        <div class="use-tools" :style="{
          'grid-template-columns': `repeat(${taskState.cardSliceNum}, minmax(50px,1fr))`
        }">
          <ToolCardItem
            v-for="(toolItem, index) in toolsList"
            :key="index"
            :item="toolItem"
            :design="design"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { commonProps } from '@hp/panels/cfg.js'
import { ElEmpty } from 'element-plus';

import ToolCardItem from './components/ToolCardItem.vue'

const emits = defineEmits([ 'mounted' ])
const props = defineProps({
  ...commonProps
})

const taskState = reactive({
  cardSliceNum: 5
})

const toolsList = computed(() => {
  return props.schema.tools
})
/**
 * 面板尺寸变化
 * 
 * @param w 宽度
 * @param h 高度
 */
const panelResize = (w, h) => {
  setTimeout(() => {
    const num = Math.floor((w - 18) / 105)
    taskState.cardSliceNum = num
  }, 150)
}

onMounted(() => {
  nextTick(() => { emits('mounted') })
})

</script>

<style lang="scss" scoped>
.hp-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  &-header {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-bottom: 1px solid #ececec;
  }
  &-body {
    flex: 1;
    min-height: 10px;
    padding: 8px;
    overflow: auto;
  }
}
.use-tools {
  display: grid;
  gap: 30px 30px;
  grid-template-columns: repeat(5, minmax(20px, 1fr));
}

</style>